<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>咨客_关联帐单</title>
		<link href="<c:url value="/resources/css/style.css" />" rel="stylesheet" type="text/css">
		<link href="<c:url value="/resources/css/default/easyui.css" />" rel="stylesheet" type="text/css">
		<link href="<c:url value="/resources/css/icon.css" />" rel="stylesheet" type="text/css">
		<script type="text/javascript" src="<c:url value="/resources/js/util.js" />"></script>
		<script type="text/javascript">
			function onSelect(row){				
				$("tr[id^='tokenTR']").attr("style", "background-color:#fff");
				$("#tokenTR" + row).attr("style", "background-color:#EEEEEE");
				$("#addItemId").val(row);
			}
			
			var rowIndex = 0;
			function onAdd(){
				if(onCheck($("#billingNo" + $("#addItemId").val()).val())){
					$.messager.alert('警告', "该帐单已选择!");
					return false;
				}
				var row = "<tr id='relateTR" + rowIndex + "' style='cursor:pointer;' ";
				row += "onmouseover=\"this.className='m1'\" onmouseout=\"this.className='m'\" onclick='onSeledToken(" + rowIndex + ")'>";
				row += "<td>" +  $("#billingNo" + $("#addItemId").val()).val();
				row += "<input type='hidden' name='selBillingId' id='selBillingId'" + rowIndex + "' value='" + $("#billingId" + $("#addItemId").val()).val() + "' />";
				row += "<input type='hidden' name='selBillingNo' id='selBillingNo'" + rowIndex + "' value='" + $("#billingNo" + $("#addItemId").val()).val() + "' />";
				row +="</td>";
				row += "</tr>";
				$("#relateTokenTable").append(row);
				$("addItemId").val('');
				rowIndex++;
			}
			
			function onCheck(billingNo){
				var flag = false;
				var relateBillingEle = document.getElementsByName("selBillingNo");
				
				if(relateBillingEle != 'undefined' && relateBillingEle.length > 0){					
					for(var i = 0; i < relateBillingEle.length; i++){
						if(relateBillingEle[i].value == billingNo){							
							flag = true;
							break;
						}
					}
				}
				
				return flag;
			}
			
			function onSeledToken(row){
				$("tr[id^='relateTR']").attr("style", "background-color:#fff");
				$("#relateTR" + row).attr("style", "background-color:#FBEC88");
				$("#removeToken").val(row);
			}
			
			function onRemove(){
				$("#relateTR" + $("#removeToken").val()).remove();
				$("#removeToken").val('');
			}
			
			function onQuery(){
				$.ajax({
					url:'queryRelateBilling',
					data:{'itemNo':$("#itemNo").val(),
						  'itemType':$("#itemType").val()},
					type:'post',
					dataType:'json',
					async:false,
					cache:false,
					success:function(data){
						if(data.result == 'success'){								
							onClearTalbe();
							$(data.obj).each(function(){
								var rownum = $("#tokenTable tr").length;
								var row = "<tr onclick='onSelect(" + rownum + ");' style='cursor: pointer;' id='tokenTR" + rownum +  
								     "' onmouseover='this.className=\"m1\"' onmouseout='this.className=\"m\"'>";
								row += "<td style='border: 1px solid #7F9DB9;'>";
								if(this['item_type'] == 1)
									row += this['item_no'];
								else
									row += "&nbsp";
								row += "</td>";
								row += "<td style='border: 1px solid #7F9DB9;'>";
								if(this['item_type'] == 2)
									row += this['item_no'];
								else
									row += "&nbsp";
								row += "</td>";
								row += "<td style='border: 1px solid #7F9DB9;'>" + this['billingNo'];
								row += "<input type='hidden' name='billingId' id='billingId" + rownum + "' value='" + this['billing_id'] + "' />";
								row += "<input type='hidden' name='billingNo' id='billingNo" + rownum + "' value='" + this['billingNo'] + "' />";
								row += "</td>";
								row += "</tr>";
								
								$("#tokenTable").append(row);
							});						
						}else
							$.messager.alert('操作结果',"系统繁忙!");
					}
				});
			}
			
			
			function onClearTalbe(){
				var row = $("#tokenTable tr").length;
				for(var i = row - 1; i >= 1; i--){					
					$("#tokenTable").find("tr").eq(i).remove();
				}
			}
			
			function onSubmit(){
				if($.trim($("#relateNo").val()) == ''){
					$.messager.alert('警告','请输入要关联的信息!');	
					return false;
				}
				
				var rows = document.getElementsByName("selBillingId");				
				if(rows != 'undefined' && rows.length > 0){
					var billingIds = "";
					for(var i = 0; i < rows.length; i++){
						billingIds += rows[i].value + (i == rows.length - 1 ? '' : ',');
					}
					
					var billingNos = "";
					var billingNoEle = document.getElementsByName("selBillingNo");
					for(var i = 0; i < billingNoEle.length; i++){
						billingNos += billingNoEle[i].value + (i == billingNoEle.length - 1 ? '' : ',');
					}
				
					$.ajax({
						url:'relateBilling',
						data:{'relateNo':$.trim($("#relateNo").val()),
							  'relateType':$("#relateType").val(),
							  'billingIds':billingIds,
							  'billingNos':billingNos},
						type:'post',
						dataType:'text',
						async:false,
						cache:false,
						success:function(data){
							if(data == 'success'){								
								onCancel();
								$("#itemNo").val('');
							    $("#itemType").val('-1');
							    onQuery();
								$.messager.alert('操作结果','关联帐单成功!');
							}else
								$.messager.alert('操作结果',data);
						}
					});
				}else
					$.messager.alert('警告','请选择要关联的帐单!');
			}
			
			function onCancel(){
				$("#relateNo").val('');
				$("#relateType").val(1);
				
				var row = $("#relateTokenTable tr").length;
				for(var i = row; i >= 0; i--){					
					$("#relateTokenTable").find("tr").eq(i).remove();
				}
			}
			
			function onClearQuery(){
				$("#itemNo").val('');
				$("#itemType").val(-1);
			}
		</script>
		<style type="text/css">
			.m1{
				background-color:#EEEEEE;
			}
			.m{
				background-color:#fff;
			}
		</style>
	</head>
	
	<body>
		<c:import url="/WEB-INF/resources/common/consult_header.jsp" />
		
		<h1>关联帐单</h1>
		
		编号：<input type="text" name="relateNo" id="relateNo" /> 
		&nbsp;&nbsp;&nbsp;&nbsp;
		关联类型：<select id="relateType" name="relateType">
					<option value="1" selected="selected">手牌</option>
					<option value="2">房间</option>
					<option value="0">帐单</option>
				</select>
		
		<table width="1000px;">
			<tr>
				<td width="550px;" style="height: 400px;">
					<fieldset style="height:400px;">
						<legend>待选帐单</legend>
							编号：<input type="text" name="itemNo" id="itemNo" size="20px;"/> &nbsp;&nbsp;
							类型：<select id="itemType" name="itemType">
										  <option value="-1" selected="selected">所有</option>
										  <option value="1">手牌</option>
										  <option value="2">房间</option>
										  <option value="0">帐单</option>
									  </select>
							&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="button" id="selBtn" name="selBtn" value="查询" onclick="onQuery()"/>
							&nbsp;&nbsp;
							<input type="button" id="rBtn" name="rBtn" value="清空" onclick="onClearQuery()" />
						<div style="overflow-y:auto; height:370px;" >
							<table id="tokenTable" width="500px;" style="margin-top: 5px;border-collapse: collapse;">
								<tr>
									<th style="border: 1px solid #7F9DB9;" width="150px;">手牌号</th>
									<th style="border: 1px solid #7F9DB9;" width="150px;">房间号</th>
									<th style="border: 1px solid #7F9DB9;" width="200px;">帐单</th>
								</tr>
								<c:if test="${fn:length(relateList) == 0}">
								<tr>
									<td colspan="3" style="border: 1px solid #7F9DB9; text-align: center;">暂无帐单</td>
								</tr>		        				
								</c:if>
								<tbody>
								<c:forEach var="relate" items="${relateList}" varStatus="index">
								<tr onclick="onSelect(${index.index});" style="cursor: pointer;" id="tokenTR${index.index}" 
									onmouseover="this.className='m1'" onmouseout="this.className='m'">
									<td style="border: 1px solid #7F9DB9;">
										<c:choose>
											<c:when test="${relate.item_type==1}">${relate.item_no }</c:when>
											<c:otherwise>&nbsp;</c:otherwise>
										</c:choose>
									</td>
									<td style="border: 1px solid #7F9DB9;">
										<c:choose>
											<c:when test="${relate.item_type==2}">${relate.item_no }</c:when>
											<c:otherwise>&nbsp;</c:otherwise>
										</c:choose>
									</td>
									<td style="border: 1px solid #7F9DB9;" >${relate.billingNo}
										<input type="hidden" name="billingId" id="billingId${index.index}" value="${relate.billing_id}" />
										<input type="hidden" name="billingNo" id="billingNo${index.index}" value="${relate.billingNo}" />
									</td>
								</tr>
								</c:forEach>
								</tbody>
							</table>
						</div>
					</fieldset>
				</td>
				<td width="150px;" style="vertical-align: middle;text-align: center;">
					<div>
						<input type="button" name="addBtn" id="addBtn" value=" 添加 >> " onclick="onAdd();"/>
						<br/>
						<input type="button" style="margin-top: 30px;" name="removeBtn" id="removeBtn" value="移除 &lt;&lt;" onclick="onRemove()"/>
					</div>
				</td>
				<td width="300px">
					<div style="overflow-y:auto;">
						<fieldset style="height:400px;">
							<legend>关联帐单</legend>
							帐单号：
							<div style="overflow-y:auto;border:1px solid #7F9DB9;width: 300px; min-height:350px;">
								<table id="relateTokenTable" width="290px;" border="0" cellpadding="0" cellspacing="0" style="margin-top: 5px;">
								</table>
							</div>
						</fieldset>
					</div>
				</td>
			</tr>
			
			<tr>
				<td colspan="3" align="center">
					<input type="button" name="sb" id="sb" value="确&nbsp;定" onclick="onSubmit()"/>
					&nbsp;&nbsp;
					<input type="button" name="cancelBtn" id="cancelBtn" value="取&nbsp;消"  onclick="onCancel()"/>
				</td>
			</tr>
		</table>
		<input type="hidden" id="addItemId" name="addItemId" />
		<input type="hidden" name="removeToken" id="removeToken" /> 
	</body>
</html>
